<template>
    <div>
        <div class="header-box">
            <div class="header-inner">
                个人简历<br>
                This is my Resume
            </div>
        </div>
        <div class="footer-box">
            <img class="img-box" src="@/assets/zbs.png" alt="">
            <div class="zbs-box">
                <h2 class="zbs-name">赵本山</h2>
                <p class="zbs-major">软件工程专业</p>
            </div>
        </div>
    </div>
</template>
<style scoped>
.header-box{
    width: 100%;
    background-color: #000;
    height: 60vh;
}
.footer-box{
    width: 100%;
    height: 40vh;
    background-color: white;
    position: relative;
}
.img-box{
    margin: 0 auto;
    margin-top: -1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: white;
}
.header-inner{
    padding-top: 0.5rem;
    width:100%;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(102, 126, 234, 1)), to(rgba(118, 75, 162, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
    font-size: 0.5rem;
    text-align: center;
}
.zbs-box{
    width: 100%;
    text-align: center;
    color: black;
    position: absolute;
    top: 1.6rem;
}
.zbs-name{
    font-size: 0.5rem;
}
.zbs-major{
    margin-top: 0.1rem;
    color: rgb(173, 173, 172);
    font-size: 0.3rem;
}
</style>